<template>
  <div id="app">
    <keep-alive>
      <!-- :class="isSliding?'unSliding':'Sliding'" -->
      <div @click="showall" class="index" :class="ismusic?'top-x':'top1-x'">
        <router-view></router-view>
      </div>
    </keep-alive>
    <!-- 音乐控件 -->
    <transition name="fade">
      <div class="btn" v-show="ismusic">
        <div class="box-music">
          <div class="left" @click="tobofang(newurl)">
            <div class="img-box">
              <img :src="newurl.pic" alt />
            </div>
            <div class="weizi">
              <p>{{newurl.title}}</p>
              <p>{{newurl.artist}}</p>
            </div>
          </div>
          <div class="right">
            <i @click="isplay" class="iconfont" :class="isbofang?'icon-bofang':'icon-bofang1'"></i>
            <i class="iconfont icon-liebiao" @click.stop="show()"></i>
          </div>
        </div>
      </div>
    </transition>
    <!-- 遮罩层 -->
    <div class="grag" :class="isout?'up':'noup'" @click.stop="up"></div>
    <div class="musiclist" :class="isshow?'show':'bushow'">
      <div class="fix">
        <p>
          当前播放
          <span>({{num}})</span>
        </p>
        <div class="top">
          <div class="top-l">
            <i class="iconfont icon-xunhuan"></i> 单曲循环
          </div>
          <div class="top-r">
            <i class="iconfont icon-shoucang"></i> 收藏全部
            <i class="iconfont icon-shanchu" @click="delAll"></i>
          </div>
        </div>
      </div>
      <!-- 播放列表 -->
      <div class="list" v-for="(item,index) in musicList" :key="index" @click="playlist(index)">
        <div class="we">
          <span>{{index+1}}</span>.
          <span>{{item.title}}</span> -
          <span>{{item.artist}}</span>
        </div>
        <div @click.stop="delet(index) " class="x">X</div>
      </div>
    </div>
  </div>
</template>
<script>
import { api } from "./assets/http/api.js";
import { mapMutations } from "vuex";
import { mapGetters } from "vuex";
//解决遮罩层滚动穿透问题，分别在遮罩层弹出后和关闭前调用
const MaskProblem = (() => {
  let scrollTop;
  return {
    afterOpen: function() {
      scrollTop = document.scrollingElement.scrollTop;
      document.body.style.top = -scrollTop + "px";
      document.body.style.position = "fixed";
      document.body.style.width = "100%";
    },
    beforeClose: function() {
      document.scrollingElement.scrollTop = scrollTop;
      document.body.style.position = "static";
      document.body.style.top = "0px";
      window.scrollTo(0, scrollTop);
    }
  };
})();
export default {
  components: {},
  data() {
    return {
      musicList: [],
      // aMuisc: new Audio(),
      title: "",
      artist: "",
      pic: "",
      isshow: false,
      isred: false,
      // 遮罩层是否显示
      isout: false,
      isSliding: false,
      scrollTop: "",
      num: 0,
      // 列表不重复判断
      add: true,
      idx: ""
    };
  },

  computed: {
    ...mapGetters([
      "url",
      "newurl",
      "isbofang",
      "timenow",
      "newmusicList",
      "myidx"
    ]),
    // 音乐控件是否显示
    ismusic() {
      return this.$store.state.ismusic;
    }
  },
  methods: {
    ...mapMutations([
      "addMsg",
      "nowTime",
      "setTime",
      "getUrl",
      "setpalyList",
      "setIdx"
    ]),
    tobofang() {
      this.$store.commit("setMusic", false);
        this.$router.push({
          name: "detail"
        });
    },

    isplay() {
      if (this.isbofang) {
        this.$store.commit("setbofang", false);
        this.aMusic.play();
      } else if (!this.isbofang) {
        this.$store.commit("setbofang", true);
        this.aMusic.pause();
      }
    },
    show() {
      this.isshow = !this.isshow;
      this.isout = true;

      let li = document.querySelectorAll(".list .we");
      console.log(this.idx)
      li[this.idx].classList.add("isred");
      li.forEach((el, indx) => {
        if (indx != this.idx) {
          li[indx].classList.remove("isred");
        }
      });

      MaskProblem.afterOpen();
    },
    showall() {
      this.isshow = false;
      this.isout = false;
    },
    up() {
      this.isshow = false;
      this.isout = false;
      MaskProblem.beforeClose();
    },
    delet(id) {
      this.musicList.splice(id, 1);
    },
    delAll() {
      this.musicList.splice(0, this.musicList.length);
    },
    playlist(index) {
      let li = document.querySelectorAll(".list .we");
      li[index].classList.add("isred");
      li.forEach((el, indx) => {
        if (indx != index) {
          li[indx].classList.remove("isred");
        }
      });

      MaskProblem.beforeClose();
      // this.isout = false;
      let music = this.musicList[index];
      this.getUrl(music);
      // this.isshow = false;
      this.$store.commit("setbofang", false);
      this.isred = true;
    }
  },
  watch: {
    // 监听当前播放的是哪一首歌
    newurl: {
      handler(newVal) {
        // 当前播放的音乐
        this.title = newVal.title;
        this.artist = newVal.artist;
        this.pic = newVal.pic;

        // this.$store.commit("setMusic", true);
        this.aMusic.playMusic(newVal.src);
        this.$store.commit("setbofang", false);
        this.$store.commit("setbofang", false);

        // 当前播放列表
        // 如果里面已经有同一首歌，则不添加
        this.musicList.forEach(el => {
          if (el.id == newVal.id) {
            this.add = false;
            setTimeout(() => {
              this.add = true;
            }, 300);
          }
        });
        if (this.add) {
          this.musicList.push({
            title: newVal.title,
            artist: newVal.artist,
            src: newVal.src,
            pic: newVal.pic,
            id: newVal.id
          });
        }
            this.musicList.forEach((el, idex) => {
              if (el.id == newVal.id) {
                this.idx = idex;
                this.setIdx(idex)
              }
            });

        this.num = this.musicList.length;
      },
      deep: true
    },
    musicList(newVal) {
      this.num = this.musicList.length;
      this.setpalyList(newVal);
    }
  },
  created() {
    this.$axios(api.get_like_list).then(res => {
      res = res.data.result;
      this.addMsg(res);
      this.$axios(api.newsong).then(res1 => {
        res1 = res1.data.result;
        this.$store.commit("addMusic", res1);
        this.$axios("https://netease.bluej.cn/top/list?idx=1").then(hot_res => {
          this.$store.commit("set_hot_data", hot_res.data.playlist.tracks);
        });
      });
    });
    this.title = this.url.title;
    this.artist = this.url.artist;
    this.pic = this.url.pic;
  }
};
</script>
<style lang="scss">
@function vm($px) {
  @return ($px / 375) * 100vw;
}
.isred {
  color: red;
}
.top-x {
  padding-bottom: 66px;
}
.top1-x {
  padding-bottom: 0;
}
.van-progress__pivot {
  position: absolute;
}
* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}
.unSliding {
  overflow: hidden;
  position: fixed;
}
.Sliding {
  overflow: hidden;
}
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  // text-align: center;
  color: #2c3e50;
  width: 100%;
  overflow: hidden;
  position: absolute;
  z-index: 1;
  // height: 100%;
  // padding-top: 119px;
}
.index {
  height: 100%;
}
.up {
  display: block;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 9999;
  height: 100%;
  background-color: gray;
  opacity: 0.5;
}
.noup {
  display: none;
}
.fade-enter-active,
.fade-leave-active {
  transition: all 0.5s;
}
.fade-enter {
  transform: translateY(30px);
  opacity: 0;
}
.fade-leave-to {
  transform: translateY(30px);
  opacity: 0;
}
.btn {
  width: 100%;
  height: 66px;
  background-color: #6697e4f5;
  background-image: linear-gradient(45deg, #64eaaa, transparent);
  position: fixed;
  left: 0;
  bottom: 0;
  z-index: 999;
  margin-top: 66px;

  .box-music {
    display: flex;
    justify-content: space-between;
    .left {
      display: flex;
      .img-box {
        width: 66px;
        height: 66px;
        padding: 7px;
        img {
          border-radius: 50%;
          width: 100%;
          height: 100%;
        }
      }
      .weizi {
        padding-top: 16px;
        p {
          &:first-of-type {
            font-size: 15px;
            color: black;
            width: 195px;
            text-align: start;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
          }
          &:last-of-type {
            font-size: 12px;
            color: #666;
            text-align: start;
          }
        }
      }
    }
    .right {
      padding-right: 19px;
      .icon-bofang {
        font-size: 23px;
        line-height: 66px;
        color: #7b66d8;
      }
      .icon-bofang1 {
        font-size: 23px;
        line-height: 66px;
        color: #7b66d8;
      }
      .icon-liebiao {
        font-size: 22px;
        line-height: 66px;
        color: #7b66d8;
        margin-left: 19px;
      }
    }
  }
}
@keyframes muslist {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
.show {
  display: block;
}
.bushow {
  display: none;
}
.musiclist {
  width: 90%;
  overflow: auto;
  height: 65%;
  background-color: #ffffff;
  border-radius: 37px;
  position: fixed;
  left: 5%;
  bottom: 25px;
  z-index: 99999;
  transition: all 1s;
  animation: muslist 0.3s;
  box-shadow: 0 0 2px grey;
  padding-top: 89.58px;
  .fix {
    position: fixed;
    left: 19px;
    border-radius: 50px;
    top: 208px;
    z-index: 9;
    width: 90%;
    background-color: white;
    p {
      text-align: start;
      margin-top: 18px;
      margin-left: 18px;
      color: #313131;
      font-weight: bold;
      span {
        color: #959595;
        font-size: 13px;
      }
    }
    .top {
      display: flex;
      justify-content: space-between;
      padding: 15px;
      font-size: 14px;
      color: black;
      .top-l {
        padding-left: 18px;
        .icon-xunhuan {
          color: #949494;
          vertical-align: middle;
          margin-right: 6px;
        }
      }
      .top-r {
        padding-right: 40px;
        .icon-shoucang {
          color: hsl(0, 0%, 58%);
          vertical-align: middle;
          margin-right: 5px;
        }
        .icon-shanchu {
          color: hsl(0, 0%, 58%);
          vertical-align: middle;
          display: inline-block;
          transform: translateX(24px);
        }
      }
    }
  }
  .list {
    display: flex;
    padding: 15px;
    justify-content: space-between;
    span {
      &:last-of-type {
        font-size: 12px;
      }
    }
    .we {
      width: 257px;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      text-align: start;
      height: 31.8px;
      line-height: 31.8px;
    }
    .x {
      width: 50px;
      height: 31.8px;
      line-height: 31.8px;
    }
  }
}
</style>
